<template>
  <header class="app-header">
    <div class="header-left">
      <el-button 
        type="text" 
        @click="toggleSidebar"
        class="sidebar-toggle"
      >
        <el-icon><Fold v-if="appStore.sidebarVisible" /><Expand v-else /></el-icon>
      </el-button>
      
      <div class="app-title">
        <router-link to="/" class="title-link">
          Photo Plover Store
        </router-link>
      </div>
    </div>
    
    <div class="header-center">
      <el-input
        v-model="searchQuery"
        placeholder="搜索照片..."
        class="search-input"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button @click="handleSearch">
            <el-icon><Search /></el-icon>
          </el-button>
        </template>
      </el-input>
    </div>
    
    <div class="header-right">
      <el-button type="text" @click="openImportDialog">
        <el-icon><Plus /></el-icon>
        导入
      </el-button>
      
      <el-dropdown @command="handleUserMenu">
        <el-button type="text" class="user-menu">
          <el-icon><User /></el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="settings">设置</el-dropdown-item>
            <el-dropdown-item command="about">关于</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAppStore } from '@/stores/app';
import { ElButton, ElIcon, ElInput, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
import { Fold, Expand, Search, Plus, User } from '@element-plus/icons-vue';

const router = useRouter();
const appStore = useAppStore();

// 搜索查询
const searchQuery = ref('');

// 切换侧边栏
const toggleSidebar = () => {
  appStore.toggleSidebar();
};

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    router.push({
      path: '/search',
      query: { q: searchQuery.value }
    });
  }
};

// 打开导入对话框
const openImportDialog = () => {
  // TODO: 实现导入对话框
  console.log('打开导入对话框');
};

// 处理用户菜单
const handleUserMenu = (command: string) => {
  switch (command) {
    case 'settings':
      router.push('/settings');
      break;
    case 'about':
      // TODO: 实现关于对话框
      console.log('显示关于对话框');
      break;
  }
};
</script>

<style scoped lang="scss">
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  
  .header-left {
    display: flex;
    align-items: center;
    
    .sidebar-toggle {
      margin-right: 15px;
      font-size: 18px;
    }
    
    .app-title {
      .title-link {
        font-size: 20px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        text-decoration: none;
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
  }
  
  .header-center {
    flex: 1;
    max-width: 500px;
    margin: 0 20px;
    
    .search-input {
      width: 100%;
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .user-menu {
      margin-left: 10px;
      font-size: 18px;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .app-header {
    .header-center {
      margin: 0 10px;
    }
    
    .app-title {
      display: none;
    }
  }
}
</style>